@()(implicit flash: Flash)
@login.main("") {


    <div class="login-content" style="margin-top: 200px">
        <h1 align="center" style="font-size: 40px;
            margin-bottom: 50px;">
            酿造微生物数据库平台
        </h1>
        <div class="register">
            <h2 class="page-heading" style="font-size: 25px;">登录账户</h2>
        </div>
        <form id="loginForm" style="max-width: 320px;" class="registration-form" accept-charset="UTF-8"
        action="@routes.HomeController.login()" type="get" >

            <div align="center">
                <span class="error" style="line-height: 35px;" id="error">@flash.get("info")
                </span>
            </div>

            <div class="form-group">
                <div class="input-group">
                    <span class="input-group-addon"><em
                    class="fa fa-user icon2x"></em>
                    </span>
                    <input id="account" name="account" placeholder="账号" autofocus="autofocus" type="text" class="form-control" required/>
                </div>
            </div>

            <div class="form-group">
                <div class="input-group">
                    <span class="input-group-addon"><em
                    class="fa fa-key icon2x"></em>
                    </span>
                    <input id="password" name="password" placeholder="密码" type="password" autofocus="autofocus" class="form-control" required maxlength="30"/>
                </div>
            </div>


            <div class="form-group">
                <div class="input-group">
                    <span class="input-group-addon"><em
                    class="fa fa-check icon2x"></em>
                    </span>
                    <input type = "text" id = "input" placeholder="验证码" autofocus="autofocus" class="form-control" required style="width: 200px;"/>
                    <input type = "button" id="code" onclick="createCode()" style="width: 60px;
                        height: 42px;
                        margin-left: 5px"
                    />
                </div>
            </div>

            <div class="actions">
                <button type="button"  onclick="validate()" class="btn btn-primary" style="width: 100%;
                    height: 40px" id="search">登 录</button>
            </div>
        </form>


    </div>


    <script>

            $(function () {
                $(".login-bg").backstretch(["/assets/images/bg1.jpg"], {fade: 1e3, duration: 8e3})
            });

            var code ; //在全局定义验证码
            //产生验证码
            window.onload = function createCode() {
                code = "";
                var codeLength = 4;//验证码的长度
                var checkCode = document.getElementById("code");
                var random = new Array(0, 1, 2, 3, 4, 5, 6, 7, 8, 9);//随机数
                for (var i = 0; i < codeLength; i++) {//循环操作
                    var index = Math.floor(Math.random() * 10);//取得随机数的索引（0~35）
                    code += random[index];//根据索引取得随机数加到code上
                }
                checkCode.value = code;//把code值赋给验证码
            };

            function createCode() {
                code = "";
                var codeLength = 4;//验证码的长度
                var checkCode = document.getElementById("code");
                var random = new Array(0, 1, 2, 3, 4, 5, 6, 7, 8, 9);//随机数
                for (var i = 0; i < codeLength; i++) {//循环操作
                    var index = Math.floor(Math.random() * 10);//取得随机数的索引（0~35）
                    code += random[index];//根据索引取得随机数加到code上
                }
                checkCode.value = code;//把code值赋给验证码
            }

            //校验验证码
            function validate() {

                var inputCode = document.getElementById("input").value; //取得输入的验证码并转化为大写
                if (inputCode != code) { //若输入的验证码与产生的验证码不一致时

                    $("#error").text("验证码错误！");
                    createCode();//刷新验证码
                    document.getElementById("input").value = "";//清空文本框
                }
                else { //输入正确时
                    $("#loginForm").submit();
                }
            }

    </script>
}